import { useState } from 'react'; 
import bgImage from '@/assets/p2/background2.png';
import card1 from '@/assets/p2/1.png'
import card2 from '@/assets/p2/2.png'
import card3 from '@/assets/p2/3.png'
import '@/pages/p2/FlipCardGame.css'
import Card from "@/components/Card";
import { history } from 'umi';

const FlipCardGame = () => {  
  const [isVisible1, setIsVisible1] = useState(false); // 初始状态为不可见  
  const [isVisible2, setIsVisible2] = useState(false);
  const [isVisible3, setIsVisible3] = useState(false);
  const [isVisible4, setIsVisible4] = useState(false);
  const [isVisible5, setIsVisible5] = useState(false);
  const [isVisible6, setIsVisible6] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);

  const ifVisible1 = () => {  
    setIsVisible1(true); // 切换可见性状态
    stateDetermine();
  };
  const ifVisible2 = () => {  
    setIsVisible2(true);
    stateDetermine();
  };
  const ifVisible3 = () => {  
    setIsVisible3(true);
    stateDetermine();
  };
  const ifVisible4 = () => {  
    setIsVisible4(true);
    stateDetermine();
  };
  const ifVisible5 = () => {  
    setIsVisible5(true);
    stateDetermine();
  };
  const ifVisible6 = () => {  
    setIsVisible6(true);
    stateDetermine();
  };

  const stateDetermine = () => {
    var trueNum = 0;
    if(isVisible1){
      trueNum += 1;
    };
    if(isVisible2){
      trueNum += 1;
    };
    if(isVisible3){
      trueNum += 1;
    };
    if(isVisible4){
      trueNum += 1;
    };
    if(isVisible5){
      trueNum += 1;
    };
    if(isVisible6){
      trueNum += 1;
    };
    if(trueNum == 2){
      if( !((isVisible1 && isVisible6) || (isVisible2 && isVisible4) || (isVisible3 && isVisible5)) ){
        setIsVisible1(false);
        setIsVisible2(false);
        setIsVisible3(false);
        setIsVisible4(false);
        setIsVisible5(false);
        setIsVisible6(false);
      }
    }
    if(trueNum == 4){
      if(!((!isVisible1 && !isVisible6) || (!isVisible2 && !isVisible4) || (!isVisible3 && !isVisible5))){
        setIsVisible1(false);
        setIsVisible2(false);
        setIsVisible3(false);
        setIsVisible4(false);
        setIsVisible5(false);
        setIsVisible6(false);
      }
    }
    if(trueNum == 6){
      setIsSuccess(true);
    }
  }

  return (
    <div className='game-page' style={{ backgroundImage: `url(${bgImage})` }}>
      <div className='bg'  style={{ display: isSuccess ? 'none' : 'block' }}>
        <h1>翻牌游戏</h1>
        <ul className='flipcard'>
          <li onClick={ifVisible1}>
            <div style={{ display: isVisible1 ? 'block' : 'none' }} ><img src={card1} /></div>
          </li>
          <li onClick={ifVisible2}>
            <div style={{ display: isVisible2 ? 'block' : 'none' }} ><img src={card3} /></div>
          </li>
          <li onClick={ifVisible3}>
            <div style={{ display: isVisible3 ? 'block' : 'none' }} ><img src={card2} /></div>
          </li>
          <li onClick={ifVisible4}>
            <div style={{ display: isVisible4 ? 'block' : 'none' }} ><img src={card3} /></div>
          </li>
          <li onClick={ifVisible5}>
            <div style={{ display: isVisible5 ? 'block' : 'none' }} ><img src={card2} /></div>
          </li>
          <li onClick={ifVisible6}>
            <div style={{ display: isVisible6 ? 'block' : 'none' }} ><img src={card1} /></div>
          </li>
        </ul>
      </div>
      <Card
					onClick={() => {
            history.push('/p2/junshu');
					}}
					visible={isSuccess}
					cardId={7}
				>
					<p>获得成就</p>
					<p>商功</p>
			</Card>
    </div>
  )
}

export default FlipCardGame